<template>
  <div class="filter-content">
    <!-- 侧边栏 -->
    <div class="select-model" @click="closeGoodPop"></div>
    <div class="select-filter">
      <div class="select-filter-content">
        <form action>
          <h3>
            <a href="javascript:;" class="list-icon1" @click="closeGoodPop">
              <i class="iconfont icon-up21"></i>
            </a>
            <p>筛选商品</p>
            <button>确认筛选</button>
          </h3>
          <div class="accordion">
            <dl>
              <dt class="accordion-title accirdion-acitve">
                <i class="iconfont icon-up-fill2"></i>
                <span>商品品牌</span>
              </dt>
              <dd class="accordion-content"  v-if="isShow=true">
                <div class="accordion-cont">
                      <ul class="accordion-cont-ul">
                          <li class="accordion-cont-item active">不限
                              <span class="cont-item-icon active"></span>
                          </li>
                          <li class="accordion-cont-item">维纳斯</li>
                          <li class="accordion-cont-item">相思地</li>
                          <li class="accordion-cont-item">莫斯莫卡</li>
                          <li class="accordion-cont-item">欧曼</li>
                      </ul>
                  </div>
              </dd>
            </dl>
            <dl>
              <dt class="accordion-title">
                <i class="iconfont icon-up-fill2"></i>
                <span>商品品牌</span>
              </dt>
              <dd class="accordion-content">
                <div class="accordion-cont">
                  <ul class="accordion-cont-ul">
                    <li class="accordion-cont-item">
                      不限
                      <span class="cont-item-icon"></span>
                    </li>
                    <li class="accordion-cont-item">亲人</li>
                    <li class="accordion-cont-item">恋人</li>
                    <li class="accordion-cont-item">长辈</li>
                    <li class="accordion-cont-item">朋友</li>
                    <li class="accordion-cont-item">朋友</li>
                  </ul>
                </div>
              </dd>
            </dl>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   methods: {
       closeGoodPop() {
           this.$emit("close-pop")
       }
   },
};
</script>

<style lang="less" scoped>
.select-model {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1021;
  background: rgba(0, 0, 0, 0.2);
}
.select-filter {
  width: 320px;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  height: 100%;
  background: #fff;
  z-index: 1033;
  h3 {
    height: 50px;
    background: #00bf9d;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    color: #fff;
    p {
      font-size: 18px;
      margin-left: 50px;
    }
    button {
      border: none;
      background: transparent;
      border-radius: 5px;
      border: 1px solid #fff;
      margin-left: 50px;
    }
    a {
      color: #fff;
      display: inline-block;
    }
  }
}
.accordion {
  width: 298px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  color: #666;
  .accordion-title {
    border-bottom: 1px solid #ccc;
    height: 25px;
    padding: 10px;
  }
  .accordion-title.accirdion-acitve {
    color: #f60;
    background-color: #f3f3f3;
  }
  .icon-up-fill2 {
    margin: 7px 5px 0 0;
    font-size: 12px;
  }
  .accordion-content {
    .accordion-cont {
      padding: 10px;
      margin-bottom: -10px;
    }
    .accordion-cont-ul {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      .accordion-cont-item {
        border: 1px solid #ccc;
        padding: 2px 10px 2px 5px;
        font-size: 15px;
        margin: 0 5px 10px 0;
        line-height: 24px;
        position: relative;
        .cont-item-icon {
          border: 5px solid transparent;
          position: absolute;
          right: 0;
          bottom: 0
        }
      }
      .accordion-cont-item.active {
        border: 1px solid #f60;
         .cont-item-icon{
            border-right-color: #f60;
            border-bottom-color: #f60;
          }
      }
    }
  }
}
</style>